<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <style>
        table, th, td {
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <h1>My Head</h1>
    <table id="user-list" th:fragment="user-list">
        <tr>
            <th>id</th>
            <th>name</th>
        </tr>
        <tr th:each="user:${users}">
            <td th:text="${user.id}">1</td>
            <td th:text="${user.name}">name</td>
        </tr>
    </table>
    <button>1</button>
    <button>2</button>
    <button>3</button>
</body>
</html>
<script>
    $('button').on('click', function (e) {
        let pageNum = e.target.innerText;
        $.ajax({
            url: "/getUser?pageNum=" + pageNum,
            success: function(result) {
                $('#user-list').html(result);
            }
        });
    })
</script>